<template>
    <div>
        <el-table
        :data="tableData"
        border
        style="width: 100%">
            <el-table-column
            type="index">
            </el-table-column>
            <el-table-column
                prop="book_author"
                label="作者">
            </el-table-column>
            <el-table-column
                prop="book_name"
                label="书名">
            </el-table-column>
            <el-table-column
                prop="is_delete"
                label="是否删除">
                <template slot-scope="scope">
                {{ scope.row.is_delete ? '是':'否'}}
                </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作">
                <template slot-scope="scope">
                <el-button @click="handleClick(scope.row.id); dialogDetailVisible=true" type="text" size="small">查看</el-button>
                <el-button type="text" size="small" @click="dialogTableVisible = true; bookForm=scope.row">编辑</el-button>

                <el-popover
                    placement="top"
                    width="220"
                    :visible="visible"
                    >
                    <p>确定删除吗？</p>
                    <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" >取消</el-button>
                        <el-button type="primary" size="mini" @click="deleteBook(scope.row)">确定</el-button>
                    </div>
                    <el-button slot="reference" type="text" size="small" style="color: red;">删除</el-button>
                </el-popover>
                <!-- <el-button @click="deleteBook(scope.row)" type="text" size="small" style="color: red;">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="书籍详情" :visible.sync="dialogDetailVisible">
            <el-table :data="gridData">
                <el-table-column prop="book_author" label="作者" width="150"></el-table-column>
                <el-table-column prop="book_name" label="书名" width="200"></el-table-column>
                <el-table-column prop="book_name" label="内容"></el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog title="书籍信息" :visible.sync="dialogTableVisible">
            <el-form :model="bookForm" status-icon ref="bookForm" label-width="100px" class="demo-bookForm">
                <el-form-item label="id" prop="pass">
                    <el-input type="text" v-model="bookForm.id" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="书名" prop="pass">
                    <el-input type="text" v-model="bookForm.book_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="作者" prop="checkPass">
                    <el-input type="text" v-model="bookForm.book_author" autocomplete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="是否删除" prop="age">
                    <el-input v-model.number="bookForm.is_delete"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="dialogTableVisible = false">取消</el-button>
                    <el-button @click="updateBook(bookForm)">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>

</template>
  
<script>
import { getBooksList, deleteBook, updateBook, getBooksDetail } from '@/api/user'
export default {
    data() {
        return {
            tableData: [],
            dialogTableVisible: false,
            dialogDetailVisible: false,
            visible: null,
            gridData:[],
            bookForm: {
                id: '',
                book_name: '',
                book_author: '',
                is_delete: ''
            }
        }
    },
    created() {
        console.log('created=========')
    },
    mounted(){
        this.getBooksList()
    },
    methods: {
        handleClick(row) {
            getBooksDetail(row).then(response =>{
                console.log('++++++++++')
                this.gridData = [response.data]
            })
        },
    
        getBooksList() {
            getBooksList().then(response =>{
                this.tableData = response.data.results
                
            })
        },
        deleteBook(row){
            deleteBook(row.id).then(response => {
                this.getBooksList()
                this.$message.success('操作成功')
                this.visibletest = false;
            })
        },
        updateBook(bookForm){
            updateBook(bookForm.id, bookForm).then(response => {
                this.getBooksList()
                this.dialogTableVisible = false
            })

        },
    }
}
</script>